<template>
  <div ref="preview" class="preview"></div>
</template>
<script lang="ts">
declare var BimfaceSDKLoaderConfig: any;
declare var BimfaceSDKLoader: any;
declare var Glodon: any;
declare var hostConfig: any;
import { onMounted, reactive, ref } from "vue";

import { useRoute } from "vue-router";

export default {
  name: "preview",
  components: {},
  setup() {
    const preview = ref(null);
    const model = reactive<any>({
      viewToken: ""
    });
    const route = useRoute();
    const viewToken = route.query.viewToken;
    onMounted(() => {
      var options = new BimfaceSDKLoaderConfig();
      hostConfig.resourceHost = `${import.meta.env.VITE_DATA_3D_URL}/resource`;
      hostConfig.APIHost = import.meta.env.VITE_DATA_3D_URL;
      options.APIHost = import.meta.env.VITE_DATA_3D_URL;
      options.staticHost = `${import.meta.env.VITE_DATA_3D_URL}/static/api`;
      options.viewToken = viewToken;
      BimfaceSDKLoader.load(options, successCallback, failureCallback);
      function successCallback(viewMetaData: any) {
        var dom4Show = preview.value;
        new Glodon.Bimface.Application.WebApplicationDemo(
          viewMetaData,
          dom4Show
        );
      }

      function failureCallback(error: any) {
        console.log(error);
      }
    });
    return {
      preview,
      model
    };
  }
};
</script>

<style lang="scss" scoped>
.preview {
  width: 100%;
  height: 100%;
}
</style>
